<template>
	<view class="kind">
		<navigator :url="`./list/list?id=${item.id}`"  v-for="item in classify" :key="item.id" class="kind-main">
			<view class="blockchuangyi">
				<view class="ctitle">{{item.name}}</view>
				<image :src="item.icon" mode="" class="img"></image>
			</view>
		</navigator>
		
	</view>
</template>

<script>
	import { findCategory } from"../../api/kind/index.js"
	export default {
		data() {
			return {
				h:0,   //胶囊距离
				classify:[]//根据分类id查询分类
			};
		},
		created( option ) {
			//胶囊距离
			// ifdef 让在特殊注释里面的代码仅在某一平台才会生效
			// #ifdef MP-WEIXIN
				var menu = uni.getMenuButtonBoundingClientRect();
				// console.log("获取到的按钮信息为",uni.getMenuButtonBoundingClientRect())
				// var _this = this;
				this.h = menu.height + menu.top;
			// #endif
			//根据分类id查询分类
			findCategory("1308336521604599809")
			.then(res=>{
				// console.log(res);
				this.classify=res.data.category.children
				console.log(this.classify);
			})
		}
		
	}
</script>

<style lang="scss">
.kind{
	display: flex;
	flex-wrap: wrap;
	background-color: #F1ECE7;
	padding-top:var(--status-bar-height);
	overflow: hidden;
	
	.kind-main{
		margin-left: 40rpx;
		display: flex;
		width: 100%;
		.blockchuangyi{
			width: 670rpx;
			height: 300rpx;
			background-color: #FFFFFF;
			margin: 20rpx 0;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.img{
				
				width: 60%;
				height: 100%;
			}
			.ctitle{
				margin: 0 auto;
				font-size: 24px;
				color: #3e3e3e;
			}
		}
		
	}
	.kind-main:nth-child(1){
		
		.blockchuangyi{
			background-color: #D5D5D5;
		}
	}
	.kind-main:nth-child(3){
		width: 312rpx;
		height: 444rpx;
		padding-bottom: 90rpx;
		.blockchuangyi{
			width: 100%;
			height: 100%;
			.ctitle{
				position: absolute;
				z-index: 999;
			}
			.img{
				width: 100%;
				height: 100%;
			}
		}
	}
	.kind-main:nth-child(4){
		width: 312rpx;
		height: 444rpx;
		padding-bottom: 90rpx;
		.blockchuangyi{
			width: 100%;
			height: 100%;
			.ctitle{
				position: absolute;
				z-index: 999;
			}
			.img{
				width: 100%;
				height: 100%;
			}
		}
	}
	
	
}
</style>
